<template>
  <Wp-container>
    <template slot="header">
      <el-row>
        <el-col :span="8">
          <div class="wp-header__label">
              <i class="el-icon-menu"></i>
               <span slot="title">职位与权限管理</span>
        </div>
        </el-col>
        <el-col :span="8">
            <search-bar :search="searchParams" @on-search="searchData">
               <el-form :model="searchParams" inline class="search-form-inline">
                    <el-form-item>
                      <el-input class="wp-form-280" clearable v-model="searchParams.keyword" placeholder="员工名称/手机号码"></el-input>
                    </el-form-item>
               </el-form>
            </search-bar>
        </el-col>
      </el-row>
    </template>
    <template slot="aside">
        <div class="wp-aside__title">
            <div class="position">
                部门职位
            </div>
              <el-button
                type="text"
                icon="el-icon-circle-plus"
                @click="toAddPosition">新建职位</el-button>
          </div>

         <div class="wp-aside__content">
             <div class="section">
               <span class="dept">
                 <Dropdown-dept multiple checkStrictly @hide="handleHide"></Dropdown-dept>
                </span>
           </div>
          <div class="section" v-for="(item,index) in deptPositionList" :key="index">
            <div class="section__title">{{item.departmentName}}</div>
            <div class="section__content">
                <el-menu :default-active="activeIndex" @select.self="handleSelectDeptClick(p)" v-for='(p,index) in item.positionInfoList' :key="index">
                   <el-menu-item :index="p.positionCode">
                   <i class="el-icon-user-solid"></i>
                    <span slot="title" >
                           {{p.positionName}}
                           <span @click.stop="clickPopover($event)">
                           <el-popover
                               :id="p.positionCode"
                                placement="bottom"
                                class="wp-popper"
                                trigger="click">
                                <div class="flex-column option_btn">
                                  <div>
                                   <el-button @click.stop="toEidtPosition(p)" type="warning" plain>编 辑</el-button>
                                  </div>
                                  <div>
                                    <el-button @click.stop="deletePosition(p)" type="danger" plain>删 除</el-button>
                                  </div>
                                </div>
                               <i  slot="reference" class="el-icon-arrow-down el-icon--right arrow"></i>
                           </el-popover>
                           </span>
                      </span>
                  </el-menu-item>
               </el-menu>
             </div>
          </div>
         </div>
    </template>
    <template slot="default">
        <Emp-Position ref="empPositionRef" :param="activeInfo" :key="contentKey"/>
    </template>
    <Position ref="positionRef" :isCreate="isCreate" @save="savePosition" :visible.sync="positionVisible" :data="positionInfo" :title="positionTitle"/>
  </Wp-container>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import WpContainer from '../components/WpContainer'
import EmpPosition from './components/Emp_position'
import Position from './components/detail/Position'
import DropdownDept from '../components/department/dropdown'
import Mixins from './mixins'
// import {groupBy} from '@/utils'
export default {
  inject: ['reload'],
  components: {WpContainer, SearchBar, EmpPosition, DropdownDept, Position},
  mixins: [Mixins],
  data () {
    return {
      positionVisible: false,
      isCreate: true,
      positionTitle: '',
      positionInfo: {},
      activeInfo: {},
      activeIndex: '',
      deptList: [],
      contentKey: 1,
      deptPositionList: []
    }
  },
  mounted () {
    this.getDepartmentPositionList()
  },
  methods: {
    getDepartmentPositionList (deptCodes) {
      this.requestOption('getDepartmentPosition', {'departmentCodeList': deptCodes || []}, res => {
        this.deptPositionList = res.data || []
        if (this.deptPositionList) {
          this.activeInfo = this.getDefaultActiveItem(this.deptPositionList)
          this.activeIndex = this.activeInfo ? this.activeInfo.positionCode : ''
        }
      })
    },
    handleHide (deptCodes) {
      if (deptCodes && deptCodes.length > 0) {
        this.getDepartmentPositionList(deptCodes)
      }
    },
    getDefaultActiveItem (list) {
      if (list) {
        for (let index = 0; index < list.length; index++) {
          const element = list[index]
          if (element.positionInfoList && element.positionInfoList.length > 0) {
            return element.positionInfoList[0]
          }
        }
      }
      return null
    },
    handleSelectDeptClick (positionInfo) {
      this.activeIndex = positionInfo.positionCode
      this.activeInfo = positionInfo
      this.contentKey = Math.random()
    },
    searchData (searchParams, sourceType) {
      this.$refs.empPositionRef.handleSearch(searchParams, sourceType)
    },
    toEidtPosition (data) {
      this.positionVisible = true
      this.isCreate = false
      this.positionTitle = '编辑职位'
      this.positionInfo = {...data}
    },
    deletePosition (data) {
      this.$msgBox.confirm('确认删除职位：' + data.positionName, () => {
        this.requestOption('deletePosition', data, res => {
          this.getDepartmentPositionList()
        })
      })
    },
    clickPopover (event) {
      // console.log('event', event, event.target, event.target.getAttribute('aria-describedby'))
      var x = document.querySelectorAll('div[aria-hidden=false]')
      for (let i = 0; i < x.length; i++) {
        if (x[i].getAttribute('id') !== event.target.getAttribute('aria-describedby')) {
          x[i].style.display = 'none'
          x[i].setAttribute('aria-hidden', true)
        }
      }
    },
    toAddPosition () {
      this.positionVisible = true
      this.isCreate = true
      this.positionTitle = '新建职位'
      this.positionInfo = {}
    },
    savePosition (data) {
      if (data.positionCode && data.positionCode !== null) {
        delete data.createTime
        delete data.updateTime
        this.requestOption('updatePosition', data, res => {
          // this.$refs.positionRef.close()
          this.reload()
        })
      } else {
        this.requestOption('addPosition', data, res => {
          // this.$refs.positionRef.close()
          this.reload()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-header__label{
    font-size: 18px;
    color: #333;
    font-weight: 600;
}
.wp-aside__title{
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 15px;
    .position{
      padding-left: 15px;
    }
}
.wp-aside__content{
    overflow: auto;
    height: calc(100% - 50px);
    overflow-y: overlay;
    overflow-x: overlay;
}
.section {
  position: relative;
  &__title {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 15px;
  }
  .dept{
    padding-left: 15px;
    cursor: pointer;
  }
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.option_btn{
    text-align: center;
}
.option_btn>div{
  margin: 5px;
  .el-button{
      width: 100px;
  }
}
.arrow{
  position: absolute;
  right: 10px;
  top: 10px;
}
>>>.el-menu{
  border: 0px;
}
>>>.el-menu-item{
  height: 40px;
  line-height: 40px;
}
</style>
